<template>
  <my-card class="card">
    <h2>公共筛表单（推荐）</h2>
    <CommonForm :form="form" :rules="rules" :submit="submit">
      <CommonFormItem prop="username" label="用户名" v-model="form.username" />
      <CommonFormItem prop="password" label="密码" v-model="form.password" />
      <CommonFormItem prop="gender" label="性别" v-model="form.gender" type="select" :options="genderOptions" />
      <CommonFormItem prop="sports" label="喜欢的运动" v-model="form.sports" type="select" :options="sportsOptions" :multiple="true" />
      <CommonFormItem prop="birthday" label="生日" v-model="form.birthday" type="date" />
      <CommonFormItem prop="timeRange" label="日期时间段" v-model="form.timeRange" type="timeRange" />
    </CommonForm>
  </my-card>
</template>

<script lang="ts" setup>
import MyCard from '@/components/card/MyCard.vue'
import CommonForm from '@/components/form/CommonForm.vue'
import CommonFormItem from '@/components/form/CommonFormItem.vue'
import type { OptionItem } from '@/components/select/type'
import { ref, onMounted } from 'vue'
interface FormType {
  username: string;
  password: string;
  gender: string;
  sports: string[];
  birthday: string;
  timeRange: string[];
}

const form = ref<FormType>({
  username: '',
  password: '',
  gender: '',
  sports: [],
  birthday: '',
  timeRange: []
})
const rules = ref({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ]
})
const genderOptions = ref<OptionItem[]>([
  { label: '男', value: '男' },
  { label: '女', value: '女' }
])
const sportsOptions = ref<OptionItem[]>([
  { label: '乒乓球', value: '乒乓球' },
  { label: '篮球', value: '篮球' },
  { label: '足球', value: '足球' },
  { label: '羽毛球', value: '羽毛球' }
])

onMounted(() => {
})

// 表单验证成功
const submit = async () => {
  console.log(form.value)
}
</script>

<style lang="scss" scoped>
  .card {
    margin-bottom: 20px;
  }
</style>
